<template>
    <div class="createPost-container">
        <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
            <div class="createPost-main-container" style="margin-top: 20px;">

                <el-form-item label="任务名称" prop="filename" label-width="90px" class="postInfo-container-item">
                    {{postForm.filename}}
                </el-form-item>

                <el-form-item label-width="90px" label="文件" prop="finish_attach_id" class="postInfo-container-item">
                    <el-upload
                            class="upload-demo"
                            :action="uploadUrl"
                            :headers="uploadHeaders"
                            :before-upload="beforeUpload"
                            :before-remove="beforeRemove"
                            :on-success="onSuccess"
                            :multiple="multiple"
                            :file-list="fileList"
                            accept=".doc,.docx,.xls,.xlsx,.zip,.rar"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传doc,docx,xls,xlsx,zip,rar文件，且不超过20Mb</div>
                    </el-upload>
                </el-form-item>

                <el-form-item label-width="90px">
                    <el-button type="success" :disabled="loading" @click="submitForm">确认完成</el-button>
                </el-form-item>

            </div>
        </el-form>
    </div>
</template>

<script>
    import { getToken } from '@/utils/auth' // get token from cookie

    export default {
        name: 'taskFinish',
        data() {
            return {
                postForm: null,
                loading: false,
                multiple: false,
                fileList: [],
                uploadUrl: this.$adminApi.uploadUrl,
                uploadHeaders: {
                    'Access-Control-Allow-Origin' : '*',
                    Authorization : `Bearer ${getToken()}`
                },
                userListOptions: [],
                rules: {
                    finish_attach_id: [
                        { required: true, message: '请选择文件', trigger: 'change' }
                    ],
                },
            }
        },
        created() {
            const id = this.$route.params && this.$route.params.id
            this.fetchData(id)
        },
        methods: {
            fetchData(id) {
                this.$adminApi.task_detail({id:id}).then(response => {
                    this.postForm = response.data
                }).catch(err => {
                    console.log(err)
                })
            },
            submitForm() {
                this.$refs.postForm.validate(valid => {
                    if (valid) {
                        this.loading = true
                        this.$adminApi.task_finish(this.postForm).then(response => {
                            this.$notify({
                                title: '成功',
                                message: '任务成功完成',
                                type: 'success',
                                duration: 2000
                            })
                            if (!response.code) {
                                this.$router.push({
                                    name: 'myTask',
                                    params: {  }
                                })
                            }
                            this.loading = false
                        }).catch((e)=>{
                            this.loading = false
                        })
                    }
                })
            },
            onSuccess(response, file, fileList) {
                if (response.code) {
                    this.$alert("上传失败");
                    this.fileList = [];
                    return false;
                } else {
                    this.postForm.finish_attach_id = response.data.id
                    this.fileList = [file];
                }
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${ file.name }？`);
            },
            beforeUpload(file, fileList) {
                if (file.size / 1024 / 1024 > 20) {
                    this.$message({
                        message: '上传文件大小不能超过 20MB!',
                        type: 'warning'
                    });
                    return false;
                }
            },

        }
    }
</script>
